<script setup lang="ts">
import { ref, onMounted, watch, type Ref } from "vue";

import { useScrollBarDragger } from "@renderer/utils/dragger";

const value: Ref<Array<string | number>> = defineModel({ default: [] });

const props = withDefaults(
  defineProps<{
    title?: string;
    fullscreen?: boolean;
    placeholder?: string;
    steps: Array<string>;
    options: Array<Option>;
  }>(),
  {
    title: "请选择",
    fullscreen: true,
    placeholder: "点击选择"
  }
);

const visible = ref(false);
const step = ref(0);
const historyOptions: Ref<Array<Array<Option>>> = ref([]);
const currentLabels: Ref<Array<string | number>> = ref([]);

watch(
  () => props.options,
  (val) => {
    historyOptions.value.length = 1;
    historyOptions.value[0] = val;
  },
  { immediate: true }
);

// 设定选择框高度，为最大高度
const selectBoxHeight = ref(0);
onMounted(() => {
  const precent = props.fullscreen ? 1 : 0.75;
  selectBoxHeight.value = window.innerHeight * precent - 70 - 60 - 73;
  addEventListener(
    "resize",
    () => (selectBoxHeight.value = window.innerHeight * precent - 70 - 60 - 73)
  );
});

function toSelect() {
  visible.value = true;
}

function selectPageBack(page: number) {
  if (page >= 0 && props.steps && page < props.steps.length) {
    step.value = page;
    // historyOptions.value.length = page + 1;
  }
}

// 用户完成选择后
function selected(index: number, _label: string | number, _value: string | number) {
  currentLabels.value.length = step.value + 1;
  currentLabels.value[step.value] = _label;
  value.value.length = step.value;
  value.value = [...value.value, _value];
  if (props.steps && step.value + 1 < props.steps.length) {
    if (historyOptions.value[step.value]) {
      historyOptions.value[step.value + 1] = historyOptions.value[step.value][index].children;
      step.value += 1;
    }
  } else {
    visible.value = false;
  }
}

// 设置滚动条
const selectScrollRef = ref(null);
const selectDragger = useScrollBarDragger(selectScrollRef);
</script>

<template>
  <el-input
    :value="currentLabels.join(' / ')"
    :placeholder="props.placeholder"
    readonly
    @click="toSelect"
  />
  <el-dialog v-model="visible" :fullscreen="props.fullscreen" :title="props.title">
    <el-steps :active="step" align-center>
      <el-step
        v-for="stepName in props.steps"
        :key="stepName"
        :title="stepName"
        @click="selectPageBack(props.steps.indexOf(stepName))"
      />
    </el-steps>
    <el-scrollbar
      ref="selectScrollRef"
      class="select-box"
      :height="selectBoxHeight - 57 + 'px'"
      @mousedown="selectDragger.mouseDownHandler"
      @mouseup="selectDragger.mouseUpHandler"
      @mousemove="selectDragger.mouseMoveHandler"
      @mouseleave="selectDragger.mouseUpHandler"
    >
      <el-space class="select-space" direction="vertical">
        <el-button
          v-for="(item, index) in historyOptions[step]"
          :key="item.value"
          class="select-btn"
          size="large"
          @click="selected(index, item.label, item.value)"
          >{{ item.label }}</el-button
        >
      </el-space>
    </el-scrollbar>
  </el-dialog>
</template>

<style scoped lang="scss">
.select-box {
  margin: 24px 0 0 0;
  .select-space {
    width: 100%;
  }
}
.select-btn {
  width: 100% !important;
  height: 56px !important;
}
:deep(.el-space__item) {
  width: 100%;
}
</style>
